<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link href="/static/logistics/gijgo-combined-1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/logistics/css/simple-bs-dialog.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/logistics/css/toast.css">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>

<div class="bg-light" id="myOrderId">
    <div class="container">
        <div class="row">

            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <!-- 选项卡 -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link text-warning active" data-toggle="tab" href="#pre">预录开单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-warning" data-toggle="tab" href="#home">我寄的</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-warning" data-toggle="tab" href="#menu1">我收的</a>
                    </li>
                </ul>

                <!-- 选项卡对应内容 -->
                <div class="tab-content" style="margin-bottom: 20%;">
                    <div class="tab-pane active container" id="pre">
                        <div class="row pt-2">
                            <!--  预录单 -->
                            <div class="col-sm-12 m-auto">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">序号</th>
                                        <th scope="col">预录单号</th>
                                        <th scope="col">寄件人/收件人</th>
                                        <th scope="col">下单时间</th>
                                        <th scope="col">当前进度</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(record,index) in prerecord">
                                        <th scope="row">{{index+1}}</th>
                                        <td>{{record.preRecordedId}}<span class="d-block" v-if="record.orderState == 3">已取消</span></td>
                                        <td class="text-center">
                                            <span class="text-info font-weight-normal d-block">
                                                {{record.putSendInfos[1].putSendName}}
                                                &nbsp
                                                {{record.putSendInfos[1].putSendArea}}
                                            </span>
                                            <i class="fa fa-long-arrow-down"></i>
                                            <span class="font-weight-normal d-block">
                                                {{record.putSendInfos[0].putSendName}}
                                                &nbsp
                                                {{record.putSendInfos[0].putSendArea}}
                                            </span>

                                        </td>
                                        <td>{{record.orderTime}}</td>
                                        <td>
                                            <a class="text-decoration-none text-warning" href="javascript:void (0);" @click="prerecordInfo(index)">查看详情</a>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger" v-if="record.orderState < 3" @click="offPrerecord(record.recordedId,index)">取消</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <!-- 分页 -->
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item" v-for="index of pageUtil.pageCount">
                                            <a name="prePageName" class="page-link" href="javascript:void(0);" @click="prerecordPage(index,$event)">{{index}}</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                            </div>

                        </div>

                    </div>

                    <div class="tab-pane fade container" id="home">
                        <div class="row pt-2">
                            <div class="col-sm-4">

                                <div class="input-group mb-3">

                                    <div class="input-group-prepend">
                                        <button class="btn btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{sendOrderQueryActive}}</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="javascript:void(0);" @click="sendOrderQueryClick('订单号')">订单号</a>
                                            <a class="dropdown-item" href="javascript:void(0);" @click="sendOrderQueryClick('寄件人')">寄件人</a>
                                            <a class="dropdown-item" href="javascript:void(0);" @click="sendOrderQueryClick('收件人')">收件人</a>
                                            <a class="dropdown-item" href="javascript:void(0);" @click="sendOrderQueryClick('收件人手机')">收件人手机</a>
                                            <a class="dropdown-item" href="javascript:void(0);" @click="sendOrderQueryClick('寄件人手机')">寄件人手机</a>
                                        </div>
                                    </div>
                                    <input type="text" v-model="sendOrderQuery.queryType" class="form-control" aria-label="Text input with dropdown button">
                                </div>

                            </div>
                            <div class="col-sm-5">
                                <div class="row">
                                    <div class="col-sm-2 text-right">时间</div>
                                    <div class="col-sm-5">
                                        <input class="form-control" v-model="sendOrderQuery.startDate" id="datepicker">
                                    </div>
                                    <div class="col-sm-5">
                                        <input class="form-control" v-model="sendOrderQuery.endDate" id="datepicker2">
                                    </div>
                                </div>


                            </div>

                            <div class="col-sm-3">
                                <label>订单状态</label>
                                <select v-model="sendOrderQuery.orderStatus" class="form-control" style="display: inline;width: 70%;">
                                    <option selected value="10">全部订单</option>
                                    <option value="2">待取件</option>
                                    <option value="1">运送中</option>
                                    <option value="3">已签收</option>
                                    <option>其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="row pl-3">
                            <button type="button" class="btn btn-warning" @click="queryConditionSendOrderSubmit">查询</button>
                        </div>

                        <div class="row pt-2">
                            <div class="col-sm-12 m-auto">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">序号</th>
                                        <th scope="col">订单号/运单号</th>
                                        <th scope="col">寄件人/收件人</th>
                                        <th scope="col">下单时间</th>
                                        <th scope="col">当前进度</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(order,index) in sendOrder">
                                        <th scope="row">{{index+1}}</th>
                                        <td class="text-center">
                                            <span class="d-block">{{order.courierOdd}}</span>
                                            <b>/</b>
                                            <span class="d-block">{{order.waybillMark}}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="d-block">{{order.putSendInfos[1].putSendName}}&nbsp{{order.putSendInfos[1].putSendArea}}</span>
                                            <i class="fa fa-long-arrow-down"></i>
                                            <span class="text-primary" v-if="order.orderStatus == 0">已下单</span>
                                            <span class="text-primary" v-if="order.orderStatus == 1">已发货</span>
                                            <span class="text-primary" v-if="order.orderStatus == 2">派送中</span>
                                            <span class="text-primary" v-if="order.orderStatus == 3">已签收</span>
                                            <span class="text-primary" v-if="order.orderStatus == 4">已回单</span>
                                            <span class="text-primary" v-if="order.orderStatus == 6">未签收</span>
                                            <span class="d-block">{{order.putSendInfos[0].putSendName}}&nbsp{{order.putSendInfos[0].putSendArea}}</span>
                                        </td>
                                        <td>{{order.orderDate}}</td>
                                        <td>
                                            <a class="text-decoration-none text-warning" href="javascript:void (0);" @click="detailsOrderInfo(index)">查看详情</a>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-outline-warning" v-if="order.orderStatus < 3" @click="sendOrderComplain(index)">投诉</button>
                                            <button type="button" class="btn btn-outline-warning" v-if="order.orderStatus == 3">评价</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <!-- 分页 -->
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item" v-for="index of sendPageUtil.pageCount">
                                            <a class="page-link" href="javascript:void (0);">{{index}}</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                            </div>
                        </div>


                    </div>
                    <!-- 我收的 -->
                    <div class="tab-pane fade container" id="menu1">

                        <div class="row pt-2">
                            <div class="col-sm-2">
                                <input class="form-control" id="datepicker3" placeholder="起始日期">

                            </div>
                            <div class="col-sm-2">
                                <input class="form-control" id="datepicker4" placeholder="结束日期">
                            </div>
                            <div class="col-sm-3">
                                <button type="button" class="btn btn-warning" @click="queryPutOrder">查询</button>
                            </div>
                        </div>

                        <div class="row pt-2">

                            <div class="col-sm-12">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">序号</th>
                                        <th scope="col">订单号</th>
                                        <th scope="col">寄件人/收件人</th>
                                        <th scope="col">发出时间</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(order,index) in putOrder">
                                        <th scope="row">{{index+1}}</th>
                                        <td class="text-center">
                                            <span class="d-block">{{order.courierOdd}}</span>
                                            <b>/</b>
                                            <span class="d-block">{{order.waybillMark}}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="d-block">{{order.putSendInfos[1].putSendName}}&nbsp{{order.putSendInfos[1].putSendArea}}</span>
                                            <i class="fa fa-long-arrow-down"></i>
                                            <span class="text-primary" v-if="order.orderStatus == 0">已下单</span>
                                            <span class="text-primary" v-if="order.orderStatus == 1">已发货</span>
                                            <span class="text-primary" v-if="order.orderStatus == 2">派送中</span>
                                            <span class="text-primary" v-if="order.orderStatus == 3">已签收</span>
                                            <span class="text-primary" v-if="order.orderStatus == 4">已回单</span>
                                            <span class="text-primary" v-if="order.orderStatus == 6">未签收</span>
                                            <span class="d-block">{{order.putSendInfos[0].putSendName}}&nbsp{{order.putSendInfos[0].putSendArea}}</span>
                                        </td>
                                        <td>{{order.orderDate}}</td>
                                        <td>
                                            <a class="text-decoration-none text-warning" href="javascript:void (0);" @click="detailsOrderInfo(index)">查看详情</a>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination text-warning">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item" v-for="index of putPageUtil.pageCount">
                                            <a class="page-link" name="putPageName" href="javascript:void (0);" @click="putOrderPage(index)" >{{index}}</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- 投诉模态框 -->
    <!-- Modal -->
    <div class="modal fade" id="complainModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">我寄的订单投诉</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div v-if="complainShow === false">
                        <div class="row">
                            <div class="col-sm-5">
                                <img src="/static/logistics/home/img/waybill.png"/>
                                <span class="mr-1 ml-1">订单号</span>
                                <span>{{sendOrderInfo.courierOdd}}</span>
                            </div>
                            <div class="col-sm-7">
                                <img src="/static/logistics/home/img/prerecord.png">
                                <span class="mr-1 ml-1">下单时间</span>
                                <span>{{sendOrderInfo.orderDate}}</span>
                            </div>
                        </div>
                        <hr class="my-3">
                        <div class="row">
                            <div class="col-sm-6">

                                <div class="form-group row">
                                    <label for="phone" class="col-sm-3 col-form-label">手机</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" :class="complainInfo.phoneVerifyCss"
                                               v-model="complainInfo.phone" id="phone">
                                        <div class="invalid-feedback">
                                            {{complainInfo.phoneMsg}}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="issueType" class="col-sm-3 col-form-label">问题类型</label>
                                    <div class="col-sm-9">
                                        <select id="issueType" v-model="complainInfo.issueType" class="form-control">
                                            <option value="虚假签收">虚假签收</option>
                                            <option value="短信投书">短信投诉</option>
                                            <option value="电话下单投诉">电话下单投诉</option>
                                            <option value="费用问题">费用问题</option>
                                            <option value="错发">错发</option>
                                            <option value="遗失">遗失</option>
                                            <option value="破损">破损</option>
                                            <option value="服务态度">服务态度</option>
                                            <option value="延迟">延迟</option>
                                            <option value="其他">其他</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="col-sm-6">
                                <div class="form-group row">
                                    <label for="name" class="col-sm-3 col-form-label">姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" v-model="complainInfo.name" class="form-control"
                                               :class="complainInfo.nameVerifyCss" id="name">
                                        <div class="invalid-feedback">
                                            {{complainInfo.nameMsg}}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="goodsType" class="col-sm-3 col-form-label">货物类型</label>
                                    <div class="col-sm-9">
                                        <select id="goodsType" v-model="complainInfo.goodsType" class="form-control">
                                            <option v-for="good in goodsType" :value="good.goodsId">{{good.goodsName}}
                                            </option>
                                        </select>
                                    </div>
                                </div>


                            </div>
                            <div class="col-sm-12">

                                <div class="form-group row">
                                    <label for="complainCause" class="col-sm-3 col-form-label">投诉原因</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" v-model="complainInfo.complainCause"
                                                  :class="complainInfo.complainCauseVerifyCss" id="complainCause"
                                                  rows="3"></textarea>
                                        <div class="invalid-feedback">
                                            {{complainInfo.complainCauseMsg}}
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-sm-12">

                                <div id="submitcomplainMessage" class="alert alert-danger alert-dismissible d-none"
                                     role="alert">
                                    提交失败呢，请查看哪里填写不正确呢！
                                </div>

                            </div>
                        </div>

                    </div>
                    <div v-else>
                        <div class="row">
                            <div class="col-sm-12">

                                <div class="list-group">
                                    <a href="javascript:void (0);" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1 text-primary">姓名:{{cpmplainExist.customerName}}</h5>
                                            <small>{{cpmplainExist.workOrderBeginTime}}</small>
                                        </div>
                                        <p class="mb-1">问题类型：{{cpmplainExist.questionType}}
                                            <span class="badge badge-pill badge-secondary pull-right" v-if="cpmplainExist.workOrderStatus === 0">未回复</span>
                                            <span class="badge badge-pill badge-info pull-right" v-if="cpmplainExist.workOrderStatus === 1">正在受理</span>
                                            <span class="badge badge-pill badge-success pull-right" v-if="cpmplainExist.workOrderStatus === 2">已完成</span>
                                        </p>
                                        <small class="text-info">具体情况请到达我的工单查看哦！</small>
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <a href="/logistics/workOrder"><button type="button" class="btn btn-primary">前往工单查看</button></a>
                </div>
            </div>
        </div>
    </div>

</div>




<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="/static/logistics/js/simple-bs-dialog.js"></script>
<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/home/js/myOrder.js"></script>
<script src="/static/logistics/js/toast.js"></script>
<script>
    $('#datepicker').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
    $('#datepicker2').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
    $('#datepicker3').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
    $('#datepicker4').datepicker({
        format: 'yyyy-mm-dd',
        uiLibrary: 'bootstrap4'
    });
</script>
</body>
</html>
